<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="index.css" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app-7">
            <ol>
                <!--
                    现在我们为每个 todo-item 提供 todo 对象
                    todo 对象是变量，即内容可以是动态的。
                    我们也需要为每个组件提供一个“key”，稍后再作
                    详细解释。
                -->
                <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"
                ></todo-item>
            </ol>
        </div>

        <script src="index.js"></script>
    </body>
</html>